<template>
	<view class="content">
		<view class="component-box">
			<input class="head_input" placeholder-class="head_input_default" placeholder="请输入订单名称" @input="changeTitle"/>
			<view class="item" @tap="activeTab">
				<view class="item-title" :class="[openPop ? 'active-item-title' : '']">{{rigth_text}}</view>
				<i class="iconfont iconxiala" :class="[openPop ? 'active-item-icon' : '']"></i>
			</view>
		</view>
		<view class='pop-bg' v-if="openPop" @tap="closeAll">
			<view class="pop-bg-item" v-for="(item, index) in popList" :key="index" @tap="popClick(item.title,index)">
				<view class="item-name" :class="[popIndex == index ? 'active-item-name' : '']">{{item.title}}</view>
				<i v-if="popIndex == index" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="order-list">
			<view class="order-none" v-if="orderList.length == 0">
				<i class="iconfont iconzanwudingdan"></i>
				<view class="order-none-text">暂无订单~</view>
			</view>
			<view class="order-item" v-else v-for="(item,index) in orderList" :key="index">
				<view class="order-item-top">
					<view class="item-top-title">订单号：{{item.order_sn}}</view>
					<view class="sty9" v-if="item.order_status == 0 && is_close(item.time)">已失效</view>
					<view class="sty1" v-else-if="item.order_status == 0">待付款</view>
					<view class="sty2" v-else-if="item.order_status == 1">已付款</view>
					<view class="sty1" v-else-if="item.order_status == 2">申请退款</view>
					<view class="sty6" v-else-if="item.order_status == 3">已退款</view>
					<view class="sty2" v-else-if="item.order_status == 4">已评价</view>
				</view>
				<view class="order-item-center">
					<view class="item-center-title"><view class="item-center-name">学　科:</view>{{item.subject}}</view>
					<view class="item-center-title"><view class="item-center-name">订单名:</view>{{item.title}}</view>
					<view class="item-center-info">
						<view class="item-center-info-time">{{item.time}}</view>
						<view class="item-center-info-money">支付金额：<text>¥{{item.price}}</text></view>
					</view>
				</view>
				<view class="order-item-bottom">
					<button class="item-bottom-details" @tap="detail(item.order_id)">订单详情</button>
					<button class="disable-button" disabled="true" v-if="item.order_status == 0 && is_close(item.time)">已失效</button>
					<button v-else-if="item.order_status == 0" @tap="detail(item.order_id)" >前往支付</button>
					<!-- <button v-else-if="item.order_status == 1">待评价</button> -->
					<button v-else-if="item.order_status == 4" @tap="check(item.order_id)">查看评价</button>
				</view>
			</view>
			<uni-load-more v-if="orderList.length>3" :status="status" :content-text="contentText"/>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				testname: '', //搜索栏内容
				openPop: false,
				popList: [{
						title: '全部',
						state: 999
					},
					{
						title: '待付款',
						state: 0
					},
					{
						title: '已付款',
						state: 1
					},
					{
						title: '申请退款',
						state: 2
					},
					{
						title: '已退款',
						state: 3
					},
					{
						title: '已评价',
						state: 4
					}
				],
				popIndex: 0,
				rigth_text: "订单状态",
				orderList: [],
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getList();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function() {
				_this.getList();
			}, 500);
		},
		onLoad() {
		},
		onShow() {
			this.orderList=[];
			this.getList();
		},
		methods: {
			// 判断是否失效
			is_close(time){
				// 半小时
				return (+new Date() - +util.dateUtils.parse(time + ":00")) > 30 * 60000;
			},
			/* 获取订单列表 */
			getList() {
				var data = {
					page: this.page,
					pageSize: 10,
					user_id:uni.getStorageSync('userInfo').id
				}
				if(this.popIndex != 0) {
					data.state = this.popList[this.popIndex].state
				}
				if(this.testname != '') {
					data.title = this.testname
				}
				this.$zbapi.apiPost('parent/order/infos',data).then(res => {
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						for(var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].create_time);
							list[i].price = list[i].real_pay/100;
						}
						this.orderList = this.reload ? list : this.orderList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.orderList = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 打开 & 关闭状态切换框 */
			activeTab() {
				this.openPop = !this.openPop;
			},
			/* 关闭弹框 */
			closeAll() {
				this.openPop = false
			},
			/* 切换订单状态 */
			popClick(name,index) {
				this.rigth_text = name;
				this.popIndex = index;
				this.page = 1;
				this.reload = true;
				this.orderList = [];
				this.getList();
			},
			/*  */
			changeTitle(e) {
				this.page = 1;
				this.reload = true;
				this.orderList = [];
				this.testname = e.target.value;
				this.getList();
			},
			/* 跳转订单详情 */
			detail(order_id) {
				uni.navigateTo({
					url: 'order-detail?order_id='+order_id
				})
			},
			/* 跳转写评价 */
			// write(order_id) {
			// 	uni.navigateTo({
			// 		url: 'order-write?order_id='+order_id
			// 	})
			// },
			/* 跳转查看评价 */
			check(order_id) {
				uni.navigateTo({
					url: 'order-rating?order_id='+order_id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #FAFAFA;
		width: 100%;
		height: 100%;
	}
	.content {
		position: relative;
		width: 100%;
		height: 100%;
		background: #FAFAFA;
	}

	/* 顶部搜索栏 */
	.component-box {
		display: flex;
		align-items: center;
		width: 100%;
		height: 88upx;
		background: #FFFFFF;
	}

	.head_input {
		width: 490upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		padding-left: 10upx;
		margin-left: 30upx;
		background: #FAFAFA;
		border-radius: 12upx;
	}

	.head_input_default {
		text-align: left;
		text-indent: 40upx;
		background-position: 2% 50%;
		background-size: 5%;
		background-repeat: no-repeat;
		background-image: url('../../static/image/search.png');
		font-size: 28upx;
	}

	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 38upx;
	}

	.item-title,
	.item i {
		color: #333333;
		font-size: 34upx;
	}

	.active-item-title {
		color: #fe9900;
	}

	.active-item-icon {
		color: #fe9900 !important;
		transform: rotate(180deg);
	}

	.pop-bg {
		position: absolute;
		width: 100%;
		height: calc(100% - 93upx);
		top: 93upx;
		background-color: rgba(0, 0, 0, .3);
	}

	.pop-bg-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 93upx;
		padding: 0 30upx;
		border-bottom: 2upx solid rgba(229, 229, 229, 0.6);
		background-color: #FFFFFF;
	}

	.item-name {
		color: #333333;
		font-size: 34upx;
	}

	.active-item-name {
		color: #fe9900;
	}

	.iconduigou {
		color: #fe9900;
		font-size: 45upx;
	}

	/* 订单列表 */
	.order-none{
		width: 100%;
		text-align: center;
	}
	.order-none i{
		color: #fe9900;
		font-size: 400upx;
	}
	.order-none-text{
		color: #999999;
		font-size: 38upx;
		margin-top: -200upx;
	}
	.order-item {
		margin-top: 20upx;
		width: 100%;
		background: #FFFFFF;
	}

	.order-item-top {
		width: 92%;
		height: 90upx;
		line-height: 90upx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #E5E5E5;
	}
	.order-item-top view{
		font-size: 34upx;
	}
	.item-top-title{
		max-width: 90%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.sty1 {
		color: #FF9900;
	}

	.sty2 {
		color: #fe9900;
	}

	.sty6 {
		color: #FF7171;
	}
	.sty9 {
		color: #ccc;
	}
	.order-item-center {
		width: 92%;
		margin: auto;
		border-bottom: 2upx solid #E5E5E5;
	}
	
	.item-center-title{
		color: #333333;
		font-size: 34upx;
		display: flex;
		justify-content: flex-start;
	}
	.item-center-name{
		color: #999999;
		font-size: 34upx;
		margin-right: 20upx;
		white-space: nowrap;
	}
	.item-center-info{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item-center-info-time{
		color: #999999;
	}
	.item-center-info-money{
		color: #999999;
		font-size: 34upx;
	}
	.item-center-info-money text{
		color: #333333;
		font-size: 42upx;
	}

	.order-item-bottom {
		display: flex;
		justify-content: flex-end;
		padding: 20upx 0;
	}

	button,
	.button-hover {
		background: #FFFFFF;
		border-radius: 8upx;
		padding: 14upx 16upx;
		line-height: 1;
		font-size: 34upx;
		margin: 0 30upx 0 0;
		position: static;
		color: #FF9900;
		border: 2upx solid #FF9900;
	}

	button::after {
		border: 0;
		position: relative !important;
	}

	.item-bottom-details {
		color: #fe9900;
		border: 2upx solid #fe9900;
	}
	.disable-button {
		border: 1px solid #ccc;;
	}
</style>
